<template>
  <el-dialog v-model="visible" @close="visible=false" :close-on-click-modal="false" width="90%">
    <ImgCutter @cutDown="cutDown"></ImgCutter>
    <template #footer>
      <el-button type="primary" @click="submit()">添加至内容</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import ImgCutter from 'vue-img-cutter';

const visible = ref(false)
const emit = defineEmits(['displace'])
const submit = () => {
	setTimeout(() => {
		visible.value = false
		emit('displace', 'cut')
	}, 300)
}
const cutDown=(res) => { 
    console.log(res,"sssss");
    
 }
defineExpose({
	visible
})
</script>

<style scoped lang="scss">
.croppers-container {
	display: flex;
	justify-items: center;
}
.img-cropper {
	width: 600px;
	height: 400px;
}
.img-preview {
	width: 400px;
	height: 400px;
	overflow: hidden;
	margin: auto;
}
</style>
